<template>
	<view class="login-container">
		<!-- 品牌Logo -->
		<view class="logo-container">
			<image class="logo" src="/static/logo.jpg" mode="aspectFit"></image>
		</view>

		<!-- 登录选项 -->
		<view class="login-options">
			<!-- 手机号登录按钮（唯一登录方式） -->
			<button class="phone-login-btn" @tap="showPhonePop">
				手机号登录
			</button>

			<!-- 用户协议 -->
			<view class="agreement">
				<radio-group @tap="toggleAgreement">
					<label class="checkbox-wrapper">
						<radio :checked="agreeProtocol" color="#007AFF" />
						<text class="agreement-text">我已阅读并同意<text class="link">《用户协议》</text>和<text
								class="link">《隐私政策》</text></text>
					</label>
				</radio-group>
			</view>
		</view>
		<!-- 手机号输入弹窗 - 使用原生方式实现 -->
		<view class="modal-overlay" v-if="showPhonePopup" @tap="closePhonePopup"></view>
		<view class="phone-popup" v-if="showPhonePopup">
			<view class="popup-title">手机号登录</view>
			<view class="input-group">
				<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
			</view>
			<view class="input-group verify-code">
				<input type="number" v-model="verifyCode" maxlength="6" placeholder="请输入验证码" />
				<button class="code-btn" :disabled="counting > 0" @tap="getVerifyCode">
					{{ counting > 0 ? `${counting}s后重新获取` : '获取验证码' }}
				</button>
			</view>
			<button class="login-btn" @tap="handlePhoneLogin">登录</button>
			<text class="close-btn" @tap="closePhonePopup">×</text>
		</view>
		<!-- 微信授权后的手机号输入框 -->
		<view class="modal-overlay" v-if="showWxPhoneInput" @tap.stop="closeWxPhoneInput"></view>
		<view class="phone-popup" v-if="showWxPhoneInput" @tap.stop>
			<view class="popup-title">微信快捷登录</view>
			<view class="input-group">
				<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号" />
			</view>
			<view class="input-group verify-code">
				<input type="number" v-model="verifyCode" maxlength="6" placeholder="请输入验证码" />
				<button class="code-btn" :disabled="counting > 0" @tap="getVerifyCode">
					{{ counting > 0 ? `${counting}s后重新获取` : '获取验证码' }}
				</button>
			</view>
			<button class="login-btn" @tap.stop="handleWxPhoneSubmit">登录</button>
			<text class="close-btn" @tap.stop="closeWxPhoneInput">×</text>
		</view>
		<!-- 自定义弹窗 -->
		<view class="modal-overlay" v-if="showModal" @tap="closeModal"></view>
		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view class="modal-title">提示</view>
				<view class="modal-body">您还不是技师，请先申请技师账号</view>
				<view class="modal-footer">
					<button class="modal-btn apply-btn" @tap="goToApply">去申请</button>
					<button class="modal-btn login-btn" @tap="reLogin">重新登录</button>
					<button class="modal-btn back-btn" @tap="goBack">返回顾客端</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const jWeixin = require('jweixin-module');
	export default {
		data() {
			return {
				agreeProtocol: false,
				phone: '',
				verifyCode: '',
				counting: 0,
				timer: null,
				showPhonePopup: false,
				showWxPhoneInput: false,
				wxPhone: '',
				wxAuthCode: '',
				showWxPhoneBtn: false,
				wxLoginCode: '',
				userProfileInfo: null,
				wxLoginOpenid: '',
				wxUserInfo: null,
				showModal: false
			}
		},
		onLoad(options) {
					const loginType = uni.getStorageSync('loginType')
					const userInfo = uni.getStorageSync('userInfo')
		      if (userInfo) {
						if (loginType === 'technician') {
							uni.reLaunch({
								url: '/pages/technician/home'
							})
		        } else if (loginType === 'customer') {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
					// #ifdef H5
					const isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent)
					if (isWeixinBrowser) {
						this.initJssdkConfig()
					}
					// #endif
				},
				beforeDestroy() {
					if (this.timer) {
						clearInterval(this.timer)
					}
				},
				methods: {
					goBack() {
						this.showModal = true
						uni.reLaunch({
							url: '/pages/index/index'
						})
					},
					toggleAgreement() {
						this.agreeProtocol = !this.agreeProtocol;
					},
			showPhoneLoginPopup() {
				if (!this.agreeProtocol) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					})
					return
				}
				// #ifdef H5
				// 在H5环境下，使用微信服务号授权
				uni.showLoading({
					title: '正在授权中...'
				})
				// 检测是否在微信环境中
				const isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent)
				if (!isWeixinBrowser) {
					uni.hideLoading()
					uni.showToast({
						title: '请在微信中打开',
						icon: 'none'
					})
					return
				}
				try {
					// 获取当前页面URL，用于后续重定向回来
					const currentUrl = encodeURIComponent(window.location.href.split('#')[0])
					// 保存当前路由，用于登录成功后的跳转
					const currentRoute = window.location.hash.slice(1) || '/pages/index/index'
					uni.setStorageSync('login_redirect_route', currentRoute)
					// 构建授权回调页面的URL
					const callbackPath = '/pages/login/login'
					const callbackUrl = encodeURIComponent('https://qinxintang.com' + callbackPath)
					// 配置参数
					const appId = uni.$config.wxAppId || 'wxee39deb8d9fd37e3'
					// 构建state参数
					const redirectInfo = encodeURIComponent(`redirect_${currentRoute}`)
					// 构建授权链接
					const authUrl =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${callbackUrl}&response_type=code&scope=snsapi_userinfo&state=${redirectInfo}#wechat_redirect`
					// 跳转到微信授权页面
					window.location.href = authUrl
				} catch (error) {
					console.error('构建授权URL失败:', error)
					uni.hideLoading()
					uni.showToast({
						title: '授权失败，请重试',
						icon: 'none'
					})
				}
				// #endif
				// #ifdef MP-WEIXIN
				// 小程序环境下的处理逻辑保持不变
				// ... existing MP-WEIXIN code ...
				// #endif
				// #ifdef APP-PLUS
				// APP环境下的处理逻辑保持不变
				// ... existing APP-PLUS code ...
				// #endif
			},
			// 登录成功后的处理
			async handleLoginSuccess(response) {
				const userInfo = uni.getStorageSync('userInfo')
				// 获取App实例并调用切换tabBar方法
				const app = getApp()
				if (app.checkAndSetTabBar) {
					app.checkAndSetTabBar()
				}
				const loginType = uni.getStorageSync('loginType')
				// 检查用户角色和登录类型是否匹配
				if (loginType === 'technician' && userInfo && userInfo.role !== 'technician') {
					this.showModal = true
					return
				}
				// 根据角色跳转到不同的首页
				if (loginType === "technician") {
					uni.reLaunch({
						url: '/pages/technician/home'
					})
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			// 显示手机号输入弹窗
			showPhonePop() {
				if (!this.agreeProtocol) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					})
					return
				}
				this.showPhonePopup = true
			},
			// 显示手机号输入弹窗
			showPhoneInputPop() {
				if (!this.agreeProtocol) {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					})
					return
				}
				this.showWxPhoneInput = true
			},
			// 关闭手机号输入弹窗
			closePhonePopup() {
				this.showPhonePopup = false
				this.phone = ''
				this.verifyCode = ''
			},
			// 获取验证码
			async getVerifyCode() {
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '发送中...'
				})
				try {
					// 使用Promise包装request，以便更好地处理错误
					const result = await new Promise((resolve, reject) => {
						uni.request({
							url: `${uni.$config.baseUrl}/member/member/sendSmsCode`,
							method: 'POST',
							header: {
								'Content-Type': 'application/json'
							},
							data: {
								phoneNumber: this.phone
							},
							success: (res) => {
								resolve(res)
							},
							fail: (err) => {
								reject(new Error('网络请求失败，请检查网络连接'))
							}
						})
					})
					uni.hideLoading()
					if (result.data.code === 200) {
						uni.showToast({
							title: '验证码已发送',
							icon: 'success'
						})
						// 开始倒计时
						this.counting = 60
						this.timer = setInterval(() => {
							if (this.counting > 0) {
								this.counting--
							} else {
								clearInterval(this.timer)
							}
						}, 1000)
					} else {
						throw new Error(result.data.msg || '发送验证码失败')
					}
				} catch (err) {
					uni.hideLoading()
					uni.showToast({
						title: err.message || '发送验证码失败',
						icon: 'none'
					})
				}
			},
			// 手机号登录
			async handlePhoneLogin() {
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (!/^\d{6}$/.test(this.verifyCode)) {
					uni.showToast({
						title: '请输入6位验证码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '登录中...'
				})
				// 设置登录超时
				const loginTimeout = setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '登录超时，请重试',
						icon: 'none',
						duration: 2000
					})
				}, 15000) // 15秒超时
				try {
					// 构建请求数据
					const requestData = {
						phoneNumber: this.phone,
						code: this.verifyCode
					}
					// 如果有微信登录信息，添加到请求中
					if (this.wxLoginOpenid && this.wxUserInfo) {
						requestData.openid = this.wxLoginOpenid
						requestData.userInfo = {
							nickname: this.wxUserInfo.nickname || '',
							avatarUrl: this.wxUserInfo.headimgurl || '',
							gender: this.wxUserInfo.sex || 0
						}
					}
					// 使用Promise包装request，以便更好地处理超时和错误
					const loginResult = await new Promise((resolve, reject) => {
						uni.request({
							url: `${uni.$config.baseUrl}/member/member/smsLogin`,
							method: 'POST',
							data: requestData,
							success: (res) => {
								resolve(res)
							},
							fail: (err) => {
								console.error('请求失败:', err)
								reject(new Error('网络请求失败，请检查网络连接'))
							}
						})
					})
					// 清除超时定时器
					clearTimeout(loginTimeout)
					if (loginResult.data.code === 200) {
						const responseData = loginResult.data.data
						// 构建用户信息
						const userInfo = {
							nickname: responseData.nickname || (this.wxUserInfo ? this.wxUserInfo.nickname : '') ||
								'',
							realName: responseData.realName || '',
							avatarUrl: responseData.avatarUrl || (this.wxUserInfo ? this.wxUserInfo.headimgurl :
								'') || '',
							gender: responseData.gender || (this.wxUserInfo ? this.wxUserInfo.sex : 0) || 0,
							phone: responseData.phone || this.phone || '',
							memberNo: responseData.memberNo || '',
							memberId: responseData.memberId || '',
							openId: responseData.openId || this.wxLoginOpenid || '',
							techId: responseData.techId || '',
							birthday: responseData.birthday || '',
							totalPoints: responseData.totalPoints || 0,
							availablePoints: responseData.availablePoints || 0,
							totalAmount: responseData.totalAmount || 0,
							memberLevel: responseData.memberLevel || 0,
							role: responseData.role === 1 ? 'technician' : 'customer' // 假设userType为2是技师
						}
						// 保存登录信息
						uni.setStorageSync('token', responseData.token)
						uni.setStorageSync('userInfo', userInfo)
						if (responseData.memberId) {
							uni.setStorageSync('memberId', responseData.memberId)
						}
						// 清除导航标记，防止后续跳转问题
						uni.removeStorageSync('isNavigatingToLogin')
						uni.hideLoading()
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						// 登录成功后根据角色跳转到不同的首页
						this.handleLoginSuccess(loginResult)
					} else {
						throw new Error(loginResult.data.msg || '登录失败')
					}
				} catch (err) {
					// 清除超时定时器
					clearTimeout(loginTimeout)
					uni.hideLoading()
					uni.showToast({
						title: err.message || '登录失败，请重试',
						icon: 'none',
						duration: 2000
					})
				} finally {
					// 确保loading被隐藏
					uni.hideLoading()
				}
			},
			// 确保微信JSSDK已加载
			ensureWxJssdkLoaded() {
				return new Promise((resolve, reject) => {
					// 如果wx对象已存在且config方法可用，直接返回
					if (window.wx && typeof jWeixin.config === 'function') {
						resolve(window.wx)
						return
					}
					// 创建script标签
					const script = document.createElement('script')
					script.type = 'text/javascript'
					script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
					// 设置加载超时
					const timeout = setTimeout(() => {
						script.onerror = null
						reject(new Error('加载微信JSSDK超时'))
					}, 10000)
					// 加载成功
					script.onload = () => {
						clearTimeout(timeout)
						// 给JSSDK一点时间初始化
						setTimeout(() => {
							if (window.wx && typeof jWeixin.config === 'function') {
								console.log('微信JSSDK初始化完成')
								resolve(window.wx)
							} else {
								reject(new Error('微信JSSDK加载成功但初始化失败'))
							}
						}, 100)
					}
					// 加载失败
					script.onerror = () => {
						clearTimeout(timeout)
						reject(new Error('加载微信JSSDK失败'))
					}
					// 添加到文档
					document.head.appendChild(script)
				})
			},
			// 从localStorage获取JSSDK配置
			getJssdkConfigFromStorage() {
				try {
					const config = uni.getStorageSync('wxJssdkConfig')
					if (!config) {
						return null
					}
					// 检查配置是否过期（5分钟）
					const now = Date.now()
					const configAge = now - config.timestamp
					if (configAge > 5 * 60 * 1000) {
						uni.removeStorageSync('wxJssdkConfig')
						return null
					}
					return config
				} catch (error) {
					return null
				}
			},
			// 处理微信授权回调
			async handleWxAuthCallback(code) {
				// 保存授权code
				this.wxAuthCode = code
        console.info('拿到code了', code)
        uni.request({
          url: `${uni.$config.baseUrl}/wx/wx-service/getOauth2AccessToken`,
          method: 'GET',
          data: {
            code
          },
          success: (res) => {
            console.info('根据code请求用户信息', res)
            if (res.statusCode === 200 && res.data.code === 200) {
              const userInfo = uni.getStorageSync('userInfo')
              console.info('获取缓存用户信息', userInfo)
              if (userInfo) {
                console.info('更新用户信息', {
                  id: userInfo.memberId,
                  openId: res.data.data.openid
                })
                uni.request({
                  url: `${uni.$config.baseUrl}/member/member`,
                  method: 'PUT',
                  data: {
                    id: userInfo.memberId,
                    openId: res.data.data.openid
                  }
                })
              }
            }
          }
        })
				// 尝试从localStorage获取手机号
        const phoneCode = uni.getStorageSync('phoneCode')
				const savedPhone = uni.getStorageSync('wxPhone') || ''
				uni.showLoading({
					title: '登录中...'
				})
				try {
					// 第一步：通过code换取网页授权access_token和openid
					const accessTokenResult = await this.getWxAccessToken(code)
					if (!accessTokenResult || !accessTokenResult.access_token || !accessTokenResult.openid) {
						throw new Error('获取授权令牌失败')
					}
					// 第二步：如果是snsapi_userinfo，还需要获取用户信息
					const userInfo = await this.getWxUserInfo(accessTokenResult.access_token, accessTokenResult.openid)
					// 直接调用登录方法，传入保存的手机号
					await this.loginWithWxH5Info(code, accessTokenResult.openid, userInfo, savedPhone, phoneCode)
				} catch (err) {
					uni.hideLoading()
					uni.showToast({
						title: err.message || '授权登录失败，请重试',
						icon: 'none',
						duration: 2000
					})
					// 显示手机号输入弹窗作为备选登录方式
					setTimeout(() => {
						this.showPhonePopup()
					}, 2000)
				}
			},
			// 获取微信网页授权access_token
			async getWxAccessToken(code) {
				try {
					// 使用我们新创建的API服务
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/wx/wx-service/getOauth2AccessToken`,
						method: 'GET',
						data: {
							code: code
						}
					})
					if (result.data.code === 200 && result.data.data) {
						return result.data.data
					} else {
						throw new Error(result.data.msg || '获取授权令牌失败')
					}
				} catch (err) {
					throw new Error('获取授权令牌失败，请重试')
				}
			},
			// 获取微信用户信息
			async getWxUserInfo(access_token, openid) {
				try {
					// 使用我们新创建的API服务
					const result = await uni.request({
						url: `${uni.$config.baseUrl}/wx/wx-service/getOauth2UserInfo`,
						method: 'GET',
						data: {
							access_token,
							openid
						}
					})
					if (result.data.code === 200 && result.data.data) {
						return result.data.data
					} else {
						throw new Error(result.data.msg || '获取用户信息失败')
					}
				} catch (err) {
					throw new Error('获取用户信息失败，请重试')
				}
			},
			// 使用微信H5信息登录
			async loginWithWxH5Info(code, openid, wxUserInfo, phone, phoneCode) {
				// 如果没有显式传入手机号，则尝试从本地缓存补齐（代表之前已经通过短信登录过）
				if (!phone) {
					const localUser = uni.getStorageSync('userInfo') || {}
					if (localUser.phone) {
						phone = localUser.phone
						// 同时从缓存取出验证码（登录时已保存）
						phoneCode = uni.getStorageSync('phoneCode') || phoneCode || ''
					}
				}

				// 如果准备提交手机号，但验证码仍为空，则提示用户重新输入验证码后再授权，避免后端校验不通过
				if (phone && !phoneCode) {
					uni.hideLoading()
					uni.showToast({
						title: '请先输入手机号验证码再完成授权',
						icon: 'none'
					})
					// 弹出手机号输入框让用户补验证码
					this.showWxPhoneInput = true
					return
				}

				try {
					// 构建登录请求数据，手机号可选
					const loginData = {
						code: code,
						openid: openid,
						userInfo: {
							nickname: wxUserInfo.nickname || '',
							avatarUrl: wxUserInfo.headimgurl || '',
							gender: wxUserInfo.sex || 0
						}
					}
					if (phone) {
						loginData.phone = phone
						loginData.phoneCode = phoneCode // 此时 phoneCode 一定非空
					}
					const loginResult = await uni.request({
						url: `${uni.$config.baseUrl}/member/member/wxH5Login`,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						data: loginData
					})
					if (loginResult.data.code === 200) {
						const responseData = loginResult.data.data
						if (!responseData) {
							throw new Error('登录数据异常，请重试')
						}
						// 保存登录信息
						try {
							// 保存完整的用户信息
							const userInfo = {
								nickname: responseData.nickname || wxUserInfo.nickname || '',
								realName: responseData.realName || wxUserInfo.realName || '',
								avatarUrl: responseData.avatarUrl || wxUserInfo.headimgurl || '',
								gender: responseData.gender || wxUserInfo.sex || 0,
								phone: responseData.phone || phone || '',
								memberNo: responseData.memberNo || '',
								memberId: responseData.memberId || '',
								openId: responseData.openId || openid,
								techId: responseData.techId || '',
								birthday: responseData.birthday || '',
								totalPoints: responseData.totalPoints || 0,
								availablePoints: responseData.availablePoints || 0,
								totalAmount: responseData.totalAmount || 0,
								memberLevel: responseData.memberLevel || 0,
								role: responseData.techId !== '' ? 'technician' : 'customer'
							}
							uni.setStorageSync('token', responseData.token)
							uni.setStorageSync('userInfo', userInfo)
							uni.setStorageSync('memberId', responseData.memberId)
							// 清除导航标记，防止后续跳转问题
							uni.removeStorageSync('isNavigatingToLogin')
							uni.removeStorageSync('login_redirect_url')
							uni.hideLoading()
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})
							// 登录成功后根据角色跳转到不同的首页
							this.handleLoginSuccess(loginResult)
						} catch (storageErr) {
							throw new Error('保存用户信息失败，请重试')
						}
					} else {
						throw new Error(loginResult.data.msg || '登录失败，请重试')
					}
				} catch (err) {
					throw err
				}
			},
			// 初始化JSSDK配置
			async initJssdkConfig() {
				try {
					const configResult = await uni.request({
						url: `${uni.$config.baseUrl}/wx/jssdk/config`,
						method: 'GET',
						data: {
							url: window.location.href.split('#')[0]
						}
					})
					if (configResult.data.code === 200) {
						await this.configJweixin(configResult.data.data)
					} else {
						throw new Error(configResult.data.msg || '获取配置失败')
					}
				} catch (error) {
					uni.showToast({
						title: JSON.parse(error),
						icon: 'none'
					})
				}
			},
			// 配置JSSDK
			configJweixin(config) {
				return new Promise((resolve, reject) => {
					jWeixin.config({
						debug: false,
						appId: config.appId,
						timestamp: config.timestamp,
						nonceStr: config.nonceStr,
						signature: config.signature,
						jsApiList: [
							'updateAppMessageShareData',
							'updateTimelineShareData',
							'onMenuShareTimeline',
							'onMenuShareAppMessage',
							'getPhoneNumber',
							'checkJsApi'
						]
					})
					jWeixin.ready(() => {
						resolve()
					})
					jWeixin.error((err) => {
						reject(err)
					})
				})
			},
			// 关闭微信手机号输入框
			closeWxPhoneInput() {
				this.showWxPhoneInput = false
				this.wxPhone = ''
			},
			// 处理微信手机号提交
			handleWxPhoneSubmit() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (!/^\d{6}$/.test(this.verifyCode)) {
					uni.showToast({
						title: '请输入6位验证码',
						icon: 'none'
					})
					return
				}
				// 保存手机号到localStorage
				uni.setStorageSync('wxPhone', this.phone)
				uni.setStorageSync('phoneCode', this.verifyCode)
				// 关闭输入框
				this.closeWxPhoneInput()
				// 如果有授权code，直接进行登录
				if (this.wxAuthCode) {
					this.handleWxAuthCallback(this.wxAuthCode)
				} else {
					this.showPhoneLoginPopup()
				}
			},
			// 关闭弹窗
			closeModal() {
				this.showModal = false
			},
			// 去申请技师
			goToApply() {
				this.showModal = false
				uni.navigateTo({
					url: '/pages/technician-apply/technician-apply'
				})
			},
			// 重新登录
			reLogin() {
				this.showModal = false
				// 清除登录信息
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('memberId')
				// 跳转到登录页面
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		min-height: 100vh;
		background-color: #FFFFFF;

		.nav-bar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			padding: 0 30rpx;

			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.back-icon {
					font-size: 36rpx;
					color: #333333;
				}
			}

			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}

			.right-placeholder {
				width: 60rpx;
			}
		}

		.logo-container {
			display: flex;
			justify-content: center;
			margin-bottom: 100rpx;

			.logo {
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
			}
		}

		.login-options {
			padding: 0 40rpx;

			.phone-login-btn {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				background: linear-gradient(135deg, #2B87FF, #1A6CD1);
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 45rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 6rpx 12rpx rgba(43, 135, 255, 0.2);

				&:active {
					opacity: 0.9;
					box-shadow: 0 3rpx 6rpx rgba(43, 135, 255, 0.1);
					transform: translateY(2rpx);
				}
			}

			.test-phone-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: #4CAF50;
				color: #FFFFFF;
				font-size: 32rpx;
				border-radius: 44rpx;
				margin-top: 30rpx;
				text-align: center;
			}

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;

				.checkbox-wrapper {
					display: flex;
					align-items: center;
					padding: 10rpx;

					radio {
						transform: scale(0.8);
						margin-right: 8rpx;
						border-radius: 50%;
						border: 2rpx solid #999;

						&[checked] {
							background-color: #007AFF;
							border-color: #007AFF;
						}
					}

					.agreement-text {
						font-size: 24rpx;
						color: #999999;
						line-height: 1.5;

						.link {
							color: #007AFF;
							display: inline;
						}
					}
				}
			}
		}

		// 模态框背景
		.modal-overlay {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
		}

		// 手机号弹窗
		.phone-popup {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #FFFFFF;
			border-radius: 24rpx;
			width: 600rpx;
			padding: 40rpx;
			z-index: 1000;

			.popup-title {
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
				margin-bottom: 40rpx;
			}

			.input-group {
				margin-bottom: 30rpx;

				input {
					width: 100%;
					height: 88rpx;
					background: #F8F8F8;
					border-radius: 44rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
				}

				&.verify-code {
					display: flex;
					align-items: center;
					gap: 20rpx;

					input {
						flex: 1;
					}

					.code-btn {
						width: 200rpx;
						height: 88rpx;
						line-height: 88rpx;
						background: linear-gradient(135deg, #2B87FF, #1A6CD1);
						color: #FFFFFF;
						border-radius: 44rpx;
						font-size: 26rpx;
						padding: 0;
						box-shadow: 0 4rpx 8rpx rgba(43, 135, 255, 0.2);

						&[disabled] {
							background: #CCCCCC;
							box-shadow: none;
						}

						&:active {
							opacity: 0.9;
							box-shadow: 0 2rpx 4rpx rgba(43, 135, 255, 0.1);
							transform: translateY(2rpx);
						}
					}
				}
			}

			.login-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(135deg, #2B87FF, #1A6CD1);
				color: #FFFFFF;
				border-radius: 44rpx;
				font-size: 32rpx;
				margin-top: 40rpx;
				box-shadow: 0 6rpx 12rpx rgba(43, 135, 255, 0.2);

				&:active {
					opacity: 0.9;
					box-shadow: 0 3rpx 6rpx rgba(43, 135, 255, 0.1);
					transform: translateY(2rpx);
				}
			}

			.close-btn {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 48rpx;
				color: #999999;
				padding: 20rpx;
			}
		}

		// 微信获取手机号按钮
		.wx-phone-btn {
			position: fixed;
			bottom: 200rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 80%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #07C160;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 45rpx;
			z-index: 1001;
		}

		// 弹窗样式
		.modal {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			z-index: 1000;
			padding: 40rpx;
			box-sizing: border-box;

			.modal-content {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.modal-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 30rpx;
			}

			.modal-body {
				font-size: 32rpx;
				color: #666;
				text-align: center;
				margin-bottom: 40rpx;
				line-height: 1.5;
			}

			.modal-footer {
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.modal-btn {
					width: 100%;
					height: 88rpx;
					border-radius: 44rpx;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&.apply-btn {
						background: linear-gradient(135deg, #2B87FF, #1A6CD1);
						color: #fff;
						box-shadow: 0 6rpx 12rpx rgba(43, 135, 255, 0.2);

						&:active {
							opacity: 0.9;
							box-shadow: 0 3rpx 6rpx rgba(43, 135, 255, 0.1);
							transform: translateY(2rpx);
						}
					}

					&.login-btn {
						background-color: #f8f8f8;
						color: #333;
					}

					&.back-btn {
						background-color: #f8f8f8;
						color: #666;
					}
				}
			}
		}
	}
</style>